<template>
  <div>
    <customDialog
      :title="`${title}—设置价格`"
      :dialogVisible="dialogVisible"
      @close="closeDialog"
      @confirm="confirmDialog"
      top="10vh"
      width="950"
    >
      <div class="dialog_box">
        <GlobalPriceLimit ref="limitRef" :typePrice="2" />
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import GlobalPriceLimit from "@/components/GlobalPriceLimit/index.vue";
import {
  getDistributorVipPrice,
  setDistributorVipPrice,
} from "@/api/operateCenter/distributor/index";
import { ref, reactive } from "vue";
import { debounce } from "lodash-es";

const dialogVisible = ref(false);
const title = ref("");
const tenantId = ref<String>("");
const limitRef = ref();

// 获取vip价格阶梯
const getVip = () => {
  getDistributorVipPrice(tenantId.value).then((res: any) => {
    // 获取vip价格数组传递给子组件
    limitRef.value.vipList = res || [];
  });
};

// 父级电子显示dialog
const showDialog = async (val: any) => {
  // console.log("显示弹窗*---", val);
  dialogVisible.value = true;
  title.value = val.name;
  tenantId.value = val.id.toString();
  getVip();
};

// 确认
const emit = defineEmits(["success"]);
const confirmDialog = debounce(() => {
  let params: any = {
    tenantId: tenantId.value,
    vipPriceTierItems: limitRef.value.vipList,
  };
  setDistributorVipPrice(params).then(() => {
    dialogVisible.value = false;
    ElMessage.success("设置成功");
    emit("success");
  });
}, 300);

// 关闭
const closeDialog = () => {
  dialogVisible.value = false;
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss"></style>
